'use strict'
import React,{Component}from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    Dimensions,
    Text,
    View,
    Modal,
    ActivityIndicator
} from 'react-native';

const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;

export default class GlobalLoading extends Component {

    static propTypes = {
        show: PropTypes.bool,
        color: PropTypes.string,
        textStyle: PropTypes.any,
        loadingStyle: PropTypes.any,
        text:PropTypes.string,
    };

    static defaultProps = {
        show:false,
        text:'加载中...',
    }

    constructor(props) {
        super(props);
    }

    componentWillUnmount() {

    }

    render() {
        const {show,loadingStyle,color,textStyle,text} = this.props;
        return (
            <Modal
                animationType={"fade"}
                transparent={true}
                visible={show}
                onRequestClose={() => {
                    alert("Modal has been closed.")
                }}>
                <View style={[styles.load_box, loadingStyle]}>
                    <ActivityIndicator animating={true} color={color || '#FFF'} size={'large'}
                                       style={styles.load_progress}/>
                    <Text style={[styles.load_text, textStyle]}>{text}</Text>
                </View>
            </Modal>
        );
    }
}


const styles = StyleSheet.create({
    load_box: {
        width: 100,
        height: 100,
        backgroundColor: '#0008',
        alignItems: 'center',
        marginLeft: SCREEN_WIDTH / 2 - 50,
        marginTop: SCREEN_HEIGHT / 2 - 50,
        borderRadius: 10
    },
    load_progress: {
        position: 'absolute',
        width: 100,
        height: 90
    },
    load_text: {
        marginTop: 70,
        color: '#FFF',
    }
});
